<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        header{
            display: flex;
            background: linear-gradient(to bottom, #f4f5f9 60%, #e2e2e2);
        }
        header .logo{
            height: 70px;
            margin: 0 50px 0 60px;
        }
        img{
            display: block;
            height: 100%;
        }
        nav ul{
            display: flex;
            height: 70px;
        }
        nav ul li a{
            height: 70px;
            line-height: 70px;
            display: block;
            width: 150px;
            text-align: center;
            color: #000;
        }
        nav ul li{
            border: 0px solid #000;
            border-right-width: 1px;
            border-image: linear-gradient(#fff,rgba(0,0,0,0.2)) 1;
            position: relative;
        }
        nav>ul>li:last-child{
            border: none;
        }
        nav ul li:hover .drowmenu{
            display: block;
        }
        .drowmenu{
            position: absolute;
            display: none;
        }
        .drowmenu ul{
            display: flex;
            flex-direction: column;
        }
        .drowmenu ul li{
            border: none;
            background: linear-gradient(to bottom, #f4f5f9 60%, #e2e2e2);
        }
        ul li:hover{
            background: rgb(219, 219, 219);
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>
            <div class="logo">
                <img src="file:///Users/wingkicheung/Documents/%E6%95%99%E8%AF%BE/46%E7%8F%AD/day09/img/logo.jpg" alt="">
            </div>
            <nav>
                <ul>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">集团简介</a>
                        <div class="drowmenu">
                            <ul>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                                <li><a href="#">集团简介</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>